<template>
  <div class="info">
    <h3>购物清单-</h3>
    <div class="head">
      <el-form inline :model="list" style="width: 100%" >
        <el-form-item label="产品编号">
          <el-input v-model="list.id" placeholder="请输入产品编号" type="text" :size=size>
          </el-input>
        </el-form-item>
        <el-form-item label="进货公司">
          <el-input v-model="list.name" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item label="进货价格">
          <el-input v-model="list.goodsprice" placeholder="请输入产品价格" />
        </el-form-item>
        <el-form-item label="入库时间">
          <el-input v-model="list.indate" placeholder="请输入入库时间" />
        </el-form-item>
        <el-form-item >
          <el-button type="primary" style="width: 100px;">
            查询
          </el-button>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="handleAdd" class="100px">
            新增信息
          </el-button>
          <el-button :icon="Download" class="100px" @click="handledownload" style="background-color: #fff;"/>
        </el-form-item>
      </el-form>
    </div>
    <div class="tab">
      <el-table :data="bigdata" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="100" />
        <el-table-column prop="order" label="订单编号" width="180" />
        <el-table-column prop="name" label="产品名称" width="180" />
        <el-table-column prop="product" label="进货公司" width="180" />
        <el-table-column prop="address" label="进货地址" width="180" />
        <el-table-column prop="indate" label="入库时间" width="180" />
        <el-table-column prop="goodsprice" label="价格" width="180" />
        <el-table-column prop="people" label="产品负责人" width="180" />
        <el-table-column prop="tel" label="电话" width="180" />
        <el-table-column fixed="right" label="操作" width="120" style="color: #fff;">
      <template #default="scope">
        <el-button :icon="EditPen" circle @click="handleupdate(scope.row)"/>
        <el-button type="primary" :icon="Delete" circle @click="handleDelete(scope.row)"/>
      </template>
    </el-table-column>
      </el-table>
    </div>
    <div class="footer">

    </div> 
    <!-- //添加弹出框 -->
    <el-dialog
    v-model="addProductDialogVisible"
    title="添加详情"
    width="40%"
  >
    <div>
      <el-form :model="newProduct">
        <el-form-item label="订单编号">
          <el-input v-model="newProduct.id" />
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="newProduct.name" />
        </el-form-item>
        <el-form-item label="进货公司">
          <el-input v-model="newProduct.product" />
        </el-form-item>
        <el-form-item label="进货地址">
        <el-input v-model="newProduct.address" />
      </el-form-item>
        <el-form-item label="入库时间">
          <!-- <el-input v-model="newProduct.indate" /> -->
          <el-date-picker
            v-model="newProduct.indate"
            type="date"
            label="入库日期"
            placeholder="请选择一个日期"
            style="width: 100%"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="货物价格">
          <el-input v-model="newProduct.goodsprice" />
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="newProduct.people" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="newProduct.tel" />
        </el-form-item>
      </el-form>
    </div>
    <!-- //添加 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addProductDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addProduct">保存</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除框 -->
  <el-dialog
    v-model="deleteVisible"
    title="提示"
    width="30%"
  >
    <span>是否删除该信息</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteVisible = false">取消</el-button>
        <el-button type="primary" @click="handledel">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改框 -->
  <el-dialog v-model="updateVisible" title="修改产品" width="40%">
  <div>
    <el-form :model="updateProduct">
      <el-form-item label="产品名称">
        <el-input v-model="updateProduct.name" />
      </el-form-item>
      <el-form-item label="产品编号">
        <el-input v-model="updateProduct.order" />
      </el-form-item>
      <el-form-item label="进货公司">
        <el-input v-model="updateProduct.product" />
      </el-form-item>
      <el-form-item label="进货地址">
        <el-input v-model="updateProduct.address" />
      </el-form-item>
      <el-form-item label="入库时间">
        <el-date-picker
            v-model="updateProduct.indate"
            type="date"
            label="入库日期"
            placeholder="请选择一个日期"
            style="width: 100%"
            value-format="YYYY-MM-DD"
          />
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="updateProduct.people"  />
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="updateProduct.goodsprice"  />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="updateProduct.tel" />
      </el-form-item>
    </el-form>
  </div>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="updateVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </span>
  </template>
</el-dialog>
  </div>
</template>
 
<script lang= "ts" setup>
import { reactive,ref,computed } from 'vue' 
import { utils, writeFileXLSX } from 'xlsx'
import { ElMessage } from 'element-plus'
import { Download, Delete, EditPen } from '@element-plus/icons-vue'
const updateProduct = ref<any>();
const updateVisible = ref(false)
//定义表格搜索栏
const size = ref<'default' | 'large' | 'small'>('default')
const list=reactive({
  id:'',
  name:'',
  goodsprice:'',
  indate:'',
})
//添加
const addProductDialogVisible = ref(false)
//删除对话框默认
const deleteVisible=ref(false)
const newProduct = ref<Partial<tableData>>({})
  interface tableData {
    order:string,
    name:string,
    id: string,
    product:string,
    indate: string,
    address: string,
    goodsprice:string,
    people:string,
    tel:string,
}
//定义编号
function generateOrderNumber() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  let orderNumber = '';
  for (let i = 0; i < 8; i++) {
    const randomIndex = Math.floor(Math.random() * chars.length);
    orderNumber += chars[randomIndex];
  }
  return orderNumber;
}
const tableData = ref([
  {
    id: '1',
    order:generateOrderNumber(),
    name:'沙发',
    product:'哈哈哈哈公司',
    indate: '2016-05-03',
    address: '须弥火箭今年交叉口',
    goodsprice:'527',
    people:'小常',
    tel:'12345678999'
  },
  {
    id: '2',
    order:generateOrderNumber(),
    name:'沙发',
    product:'嘿嘿嘿嘿公司',
    indate: '2018-05-03',
    address: '蒙德比较十字路口',
    goodsprice:'250',
    people:'小杨',
    tel:'98765432100'
  },
  {
    id: '3',
    order:generateOrderNumber(),
    name:'沙发',
    product:'呵呵呵呵公司',
    indate: '2016-05-03',
    address: '璃月5楼88层',
    goodsprice:'4560',
    people:'拉西',
    tel:'11111112233'
  },
  {
    id: '4',
    order:generateOrderNumber(),
    name:'沙发',
    product:'噢噢噢噢公司',
    indate: '2014-09-05',
    address: '稻妻哈哈哈秘密',
    goodsprice:'987',
    people:'喜喜',
    tel:'89874561258'
  },
  {
    id: '5',
    order:generateOrderNumber(),
    name:'沙发',
    product:'嘿嘿嘿嘿公司',
    indate: '2018-05-03',
    address: '蒙德比较十字路口',
    goodsprice:'999',
    people:'小杨',
    tel:'98765432100'
  },
  {
    id: '6',
    order:generateOrderNumber(),
    name:'沙发',
    product:'嘿嘿嘿嘿公司',
    indate: '2018-05-03',
    address: '蒙德比较十字路口',
    goodsprice:'2550',
    people:'小杨',
    tel:'98765432100'
  },
  {
    id: '7',
    order:generateOrderNumber(),
    name:'沙发',
    product:'嘿嘿嘿嘿公司',
    indate: '2018-05-03',
    address: '蒙德比较十字路口',
    goodsprice:'1250',
    people:'小杨',
    tel:'98765432100'
  },
  {
    id: '8',
    order:generateOrderNumber(),
    name:'沙发',
    product:'嘿嘿嘿嘿公司',
    indate: '2018-05-03',
    address: '蒙德比较十字路口',
    goodsprice:'7250',
    people:'小杨',
    tel:'98765432100'
  },
])
//查询
const bigdata  = computed(() =>
  tableData.value.filter(
    (data) =>
      !list.goodsprice ||
      data.goodsprice.toLowerCase().includes(list.goodsprice.toLowerCase())
      
  )
)
//导出文件
const handledownload = () => {
  // 将待导出数据转换为 sheet 工作表中要使用到的数据，并生成工作表
  const ws = utils.json_to_sheet(tableData.value)
  // 创建新工作簿
  const wb = utils.book_new()
  // 将工作表追加到工作簿中
  utils.book_append_sheet(wb, ws, '进货管理详情表')
  // 将内存中的工作簿数据写入文件中
  console.log(ws,wb)
  writeFileXLSX(wb, `table-${new Date().toISOString()}.xlsx`)
  console.log('data:')
}
//添加
const handleAdd = () => {
  addProductDialogVisible.value = true;
}
const addProduct = () => {
  if (newProduct.value.id && newProduct.value.product&& newProduct.value.name) {
    const product: any = {
      id: (tableData.value.length + 1).toString(),
      ...newProduct.value,
    }

    tableData.value.unshift(product)
    newProduct.value = {}
    addProductDialogVisible.value = false
    console.log('添加了',product);
  } else {
    ElMessage.error('请输入必填内容')
  }
}
//删除
const delateId = ref('1234')
const handleDelete = (row:any) => {
  console.log('删除');
  delateId.value = row.id;
  deleteVisible.value =true;
}
const handledel = ()=>{
  tableData.value = tableData.value.filter((item:any) => item.id !== delateId.value)
  console.log(tableData.value);
  deleteVisible.value =false;
  
}

//修改
const handleupdate = (row:  tableData) => {
  console.log('修改');
  updateProduct.value = row;
  updateVisible.value = true;
}
const handleSave = () => {
  // 遍历原始数据，找到与当前行数据相同的数据，并将其替换为修改后的数据
  for (let i = 0; i < tableData.value.length; i++) {
    if (tableData.value[i].id === updateProduct.value.id) {
      tableData.value[i] = updateProduct.value;
      break;
    }
  }
  updateVisible.value = false;
}
</script>
 
<style lang= "less" scoped>
.el-button--primary{
  background: #9e83f8;
  border: 0;
}
.head{
  margin: 0 auto;
}
.info h3{
  font-size: 20px;
  color: black;
}
.btn{
  display: flex;
  justify-content: space-between;
}
:deep(.el-form-item__content){
  justify-content: space-between;
}
:deep(.el-button>span){
  color: #fff;
}
:deep( .el-table__cell){
  text-align: center;
}
</style>
